---
title: 'Set up Apollo Client'
sidebar_title: '6. Set up Apollo Client'
description: Connect to your API from your frontend
---

import { MultiCodeBlock } from 'gatsby-theme-apollo-docs';
import Disclaimer from '../../shared/disclaimer.mdx';

> Time to accomplish: 10 minutes

The remaining chapters of this tutorial walk through building our application frontend, which uses Apollo Client to communicate with the GraphQL server we just built:

  <img src="../images/space-explorer.png" alt="Space explorer" width="400" />

**Apollo Client** is a comprehensive state management library for JavaScript. It enables you to use GraphQL to manage both local and remote data. Apollo Client is view-layer agnostic, so you can use it with React, Vue, Angular, or even vanilla JS.

This tutorial uses React (which Apollo Client's core library supports out of the box), but the underlying concepts are the same for every view layer.

## Setup

We'll be working in the `start/client/` directory of our tutorial repo ([clone the repo here](https://github.com/apollographql/fullstack-tutorial/) if you skipped the server portion). From that directory, run:

```bash:title=start/client/
npm install
```

Along with installing other dependencies, this installs the `@apollo/client` package, which includes all of the Apollo Client features we'll use.

### Install the Apollo extension for VSCode (optional)

Apollo provides an extension for Visual Studio Code that includes loads of helpful features, such as syntax highlighting, GraphQL field suggestions via IntelliSense, and in-line performance estimates.

1. Most of the VSCode extension's features are powered by Apollo Studio. To get the most out of the extension, make sure to first complete [Connect to Apollo Studio](./production/).

2. Like Apollo Server, the VSCode extension uses an [API key](https://www.apollographql.com/docs/studio/api-keys/) to communicate with Studio. You provide this API key by setting the value of the `APOLLO_KEY` environment variable.

    Create a `.env` file in `start/client` by making a copy of `start/client/.env.example`. Then paste your API key into it like so:

    ```none:title=.env
    APOLLO_KEY=PASTE_YOUR_KEY_HERE
    ```    

    Our key is now stored under the environment variable `APOLLO_KEY`. Apollo VSCode uses this API key to fetch your server's schema from the Apollo schema registry.

3. Also in `start/client`, open the empty file called `apollo.config.js`. You use this file to configure the behavior of both the Apollo VSCode extension and the Apollo CLI. 

    Paste the snippet below into the file:

    ```js:title=apollo.config.js
    module.exports = {
      client: {
        name: 'Space Explorer [web]',
        service: 'PASTE_YOUR_GRAPH_NAME_HERE',
      },
    };
    ```

    Replace `PASTE_YOUR_GRAPH_NAME_HERE` with the unique name of the graph you created in Studio in the previous chapter.

That takes care of the VSCode extension! Now, let's dive into building our first client.

## Initialize `ApolloClient`

<Disclaimer />

Let's create our instance of `ApolloClient` by pasting the following into `src/index.tsx`:

<MultiCodeBlock>

```tsx:title=src/index.tsx
import {
  ApolloClient,
  gql,
  NormalizedCacheObject
} from '@apollo/client';
import { cache } from './cache';

const client: ApolloClient<NormalizedCacheObject> = new ApolloClient({
  cache,
  uri: 'http://localhost:4000/graphql'
});
```

```jsx:title=src/index.jsx
import { ApolloClient, gql } from "@apollo/client";
import { cache } from "./cache";

const client = new ApolloClient({
  cache,
  uri: "http://localhost:4000/graphql"
});
```

</MultiCodeBlock>

The `ApolloClient` constructor requires two parameters:

* The `uri` of our GraphQL server (in this case `localhost:4000/graphql`).
* An instance of `InMemoryCache` to use as the client's `cache`. We import this instance from the `cache.ts` file.

In just these few lines of code, our client is ready to fetch data!

## Make your first query

Before we integrate Apollo Client with a React view layer, let's try sending a query with vanilla JavaScript.

1. Add the following to the bottom of `index.tsx`:

    <MultiCodeBlock>

    ```tsx:title=src/index.tsx
    // ...ApolloClient instantiated here...

    client
      .query({
        query: gql`
          query TestQuery {
            launch(id: 56) {
              id
              mission {
                name
              }
            }
          }
        `
      })
      .then(result => console.log(result));
    ```

    </MultiCodeBlock>

2. Make sure your GraphQL server is running. If you didn't complete the server portion of the tutorial, you can run the finished server by running the following commands from `final/server`:

    ```
    npm install
    npm start
    ```

3. From `start/client`, run `npm start` to build and run your client app. When the build finishes, your browser opens to `http://localhost:3000/` automatically. 

4. When the index page opens, open up the console in your browser's developer tools. You'll see a logged `Object` that contains your server's response to your query. The data you requested is contained in the object's `data` field, and the other fields provide metadata about the state of the request.

    You can also open the Network tab in your browser's developer tools and refresh the page to view the shape of the request that Apollo Client makes to execute your query (it's a POST request to `localhost:4000`).

5. Go ahead and delete the `client.query()` call you just added, along with the import of `gql` that's no longer needed.

Now, let's integrate our client with React.
